<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		div{
/*			display: flex;*/
/*			flex-direction: column*/
		}
	</style>
</head>
<body>
<button class="all">全选</button> <button class="noall">取消全选</button> <button class="fan">反选</button> <button class="add">添加</button>

<hr>
<div>
<input type="checkbox">语文 <br>	
<input type="checkbox">语文	<br>	
<input type="checkbox">语文	<br>	
<input type="checkbox">语文	<br>	
</div>

<script type="text/javascript">
let all = document.querySelector('.all')
let noall = document.querySelector('.noall')
let fan = document.querySelector('.fan')
let add = document.querySelector('.add')
let input = document.querySelectorAll('input')

all.onclick=function(){
	for(let i = 0;i<input.length; i++){
		input[i].checked = true
	}
}
noall.onclick=function(){
	for(let i = 0;i<input.length; i++){
		input[i].checked = !true
	}
}
fan.onclick = function(){
	for(let i = 0;i<input.length; i++){
		if(input[i].checked == true){
			input[i].checked = !true
		}else{
			input[i].checked = true
		}
	}
}
let div = document.querySelector('div')
let con = document.createElement('input')
con.innerHTML="英文<br>"
add.onclick = function(){
	con.type =checked
	div.appendChild(con)
}
</script>
</body>
</html>